<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>家族发布</title>
	<%@include file="../css.jsp" %>
	<link href="${resourceRoot }/css/common.css" rel="stylesheet" type="text/css" />
	<link rel="shortcut icon" href="${resourceRoot }/images/wow.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" media="screen" href="${resourceRoot }/css/mop-landing.css" />
	<!--[if IE 6]> <link rel="stylesheet" type="text/css" media="all" href="${resourceRoot }/css/landing-ie6.css" />
	<![endif]-->

<style type="text/css">
	label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
	color: red;
}
.control-label {
	color: white;
}
</style>
</head>
<body>
<%@include file="../header.jsp" %>

<div class="container" style="width: 77%;">

 <form class="form-horizontal" action="/family/post/save"  method="post">
    <fieldset>
    	<div id="legend">
        		<legend style="color: white;">家族发布</legend>
      		</div>
    	<div class="control-group">
          	<label class="control-label">家族名称：</label>
			<input type="hidden" value="${family.id }" name="id"/>
          <div class="controls">
            <input class="input-xlarge" type="text" id="name" name="name" value="${family.name }">
          </div>
        </div>
        
        <div class="control-group">
          	<label class="control-label">家族QQ：</label>
          	<div class="controls">
            	<input class="input-xlarge" type="text" name="qq" value="${family.qq }">
          	</div>
        </div>
        
		<div class="control-group">
          	<label class="control-label">家族YY：</label>
          	<div class="controls">
            	<input class="input-xlarge" type="text" name="yy" value="${family.yy }">
          	</div>
        </div>
        
        <div class="control-group">
	         <label class="control-label">线路：</label>
	         <div class="controls">
			     <select id="line" name="line" class="input-xlarge">
            		<option value="01">双线</option>
            		<option value="02">电信</option>
            		<option value="02">网通</option>
            	</select>
	  		 </div>
		  </div>
        
        
        <div class="control-group">
          	<label class="control-label">家族族长：</label>
          	<div class="controls">
            	<input class="input-xlarge" type="text" name="leader" value="${family.leader }">
          	</div>
        </div>
        
        <div class="control-group">
		     <label class="control-label" for="input01">创建时间：</label>
		        <div class="controls">
		           <input type="text" class="input-xlarge Wdate" name="created" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" value="${family.created }">
		      </div>
		</div>
		
		<div class="control-group">
          	<label class="control-label">主页：</label>
          	<div class="controls">
            	<input class="input-xlarge" type="text" name="site" value="${family.site}">
          	</div>
        </div>
		
        
    	<div class="control-group">
	        <div class="controls">
	            <button class="btn btn-inverse" type="submit">确定</button>
	        </div>
        </div>

    </fieldset>
  </form>
  <%@include file="../template/footer.html"%>
 </div>
 

<%@include file="../js.jsp" %>
<script src="${resourceRoot }/js/jquery.form.js"></script>
<script src="${resourceRoot }/third-party/My97DatePicker/WdatePicker.js"></script>
<script src="${resourceRoot }/third-party/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
  	$('form').ajaxForm({
		beforeSubmit:function(){
			return $('form').validate().form();
		},
		success:function(){
			$('form').clearForm();
			alert("发布成功");
		}
	});
  	
  	$("form").validate({
		rules: {
			name: {required:true,maxlength:30,minlength:3,remote:"/family/check"},
			leader:{required:true},
			qq: {required:true,maxlength:20},
			yy: {required:true,maxlength:20},
			created: {required:true},
			site: {required:true,url:true}
		},
		messages: {
			name: {required:"请填写家族名称",maxlength:"不能长于30个字",minlength:"请输入至少3个字符",remote:"该用户已存在"},
			leader:{required:"请填写家族族长"},
			qq: {required:"请填写QQ",maxlength:20},
			yy: {required:"请填写YY",maxlength:20},
			created: {required:"请填写创建时间"},
			site: {required:"请填写主页",url:"请填写规范的主页"}
		}
	});
 });

</script>
</body>
</html>